<template>
	<view class="remarks_box" id="remarks_ul" :class="baseFlag?'':'remarks_box_none'" v-if="globalData">
		<!-- 1 边坡现状照片 -->
		<view class="remarks_show">
			<view class="remarks_item">
				<view class="item_title font22 color_4A5260">
					一、边坡现状照片 
				</view>
				<view class="remarks_ul" id="remarks_ul">
					<!-- globalData.side. -->
					<view class="remarks_lis flex"  v-for="(item, index) of sideStatusImage" :key="index">
						<view class="remarks_img"  @tap="tapImage('slopeNowImage', index)">
							<!-- <image :src="(/blob:/.test(item)?item:item) +'?imageView2/2/w/100'" mode="aspectFit" @error="showImageError('status边坡现状照片 ', index)" @load="showImageFinish('status边坡现状照片 ', index)"></image> -->
							<image :src="item" mode="aspectFit"></image>
						</view>
						<view class="close_img" @tap="deleteSideImage(index)">
							<image src="/static/images/close.png" mode="aspectFit"></image>
						</view>
					</view>
					
					<view  v-if="globalData.side.sideStatusImage.length<20"  class="remarks_lis flex"   @tap="uploadSideImage">
						<view class="remarks_img">
							<image src="/static/images/remarks_pic.png" mode="aspectFit" ></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 2 边坡变形调查  ---- （可上传 照片、视频、手绘图、文字说明） -->
		<view class="remarks_show">
			<view class="remarks_item">
				<view class="item_title font22 color_4A5260">
					二、边坡变形调查
				</view>
				<!-- 图片 -->
				<view class="remarks_ul" id="remarks_ul">
					<!-- globalData.side. -->
					<view class="remarks_lis flex"  v-for="(item, index) of sideShape.images" :key="index">
						<view class="remarks_img" @tap="tapImage('sideShape', index)">
							<!-- <image :src="(/blob:/.test(item)?item:item) +'?imageView2/2/w/100'" mode="aspectFit"   @error="showImageError('shape边坡变形调查', index)" @load="showImageFinish('shape边坡变形调查', index)"></image> -->
							<image :src="item" mode="aspectFit"></image>
						</view>
						<view class="close_img" @tap="deleteShape(index, 1, 'shape')">
							<image src="/static/images/close.png" mode="aspectFit"></image>
						</view>
					</view>
					
					<view  v-if="globalData.side.sideShape.images.length<20"  class="remarks_lis flex"   @tap="uploadShapeImage('shape')">
						<view class="remarks_img">
							<image src="/static/images/remarks_pic.png" mode="aspectFit" ></image>
						</view>
					</view>
				</view>
				<!-- 视频 -->
				<view class="remarks_ul" id="remarks_ul">
					<!-- globalData.side. -->
					<view class="remarks_lis flex"  v-for="(item, index) of sideShape.videos" :key="index">
						<view class="remarks_img video_box" @tap="tapVideo(item)">
							<!-- <video :src="item" controls></video> -->
							<view class="video_img">
								<image src="/static/images/videoOn.png" mode=""></image>
							</view>
							<view class="close_img" @tap.stop="deleteShape(index, 2, 'shape')">
								<image src="/static/images/close.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					
					<view  v-if="globalData.side.sideShape.videos.length<20"  class="remarks_lis flex"   @tap="uploadShapeVideo('shape')">
						<view class="remarks_img">
							<image src="/static/images/remarks_video.png" mode="aspectFit" ></image>
						</view>
					</view>
				</view>
				<!-- 手绘图 -->
				<view class="remarks_ul" id="remarks_ul">
					<!-- globalData.side. -->
					<view class="remarks_lis flex"  v-for="(item, index) of sideShape.drawn" :key="index">
						<view class="remarks_img" @tap="tapImage('drawn1', index)">
							<!-- <image :src="(/data:/.test(item)?item:item) +'?imageView2/2/w/100'" mode="aspectFit"></image> -->
							<image :src="item" mode="aspectFit"></image>
						</view>
						<view class="close_img" @tap="deleteShape(index, 3, 'shape')">
							<image src="/static/images/close.png" mode="aspectFit"></image>
						</view>
					</view>
					
					<view  v-if="globalData.side.sideShape.drawn.length<20"  class="remarks_lis flex"   @tap="uploadShapeDrawn('shape')">
						<view class="remarks_img">
							<image src="/static/images/remarks_pic02.png" mode="aspectFit" ></image>
						</view>
					</view>
				</view>
				<!-- 说明 -->
				<view class="remarks_item remarks_text">
					<view class="item_title font20 color_4A5260">
						补充说明
					</view>
					
					<!-- 文字说明 -->
					<view class="remarks_ul" id="remarks_ul">
						<view class="idea_message" v-if="globalData">
							<textarea v-model="globalData.side.sideShape.text"  maxlength="200" placeholder="请输入"></textarea>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
		import handDraw from '@/components/handDraw.vue'
		import MyVideo from '@/components/video.vue'
		import LookImage from '@/components/lookImage.vue'
		
		const qiniuUploader = require("../../../common/js/qiniuUploader.js");
		const md5 = require('../../../common/js/md5.js')
	export default {
		data() {
			return {}
		},
		methods: {
			
			/**
			 * 1
			 * 边坡现状图片
			 * 点击选择图片
			 */
			uploadSideImage1(){
				let app = getApp()
				let that = this;
				uni.chooseImage({
					count: 1,
				    success: (chooseImageRes) => {
				        let tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log('点击选择图片', chooseImageRes)
						
						uni.showLoading({
							title: '正在上传文件..',
							mask: true
						})
						
				        uni.uploadFile({
				            url: 'http://123.206.82.183:8020/api/general_file_upload', 
				            filePath: tempFilePaths[0],
				            name: 'files',
				            formData: {
				                'user': 'test'
				            },
				            success: (res) => {
				                // console.log('上传成功', res, res.data);
								let info = JSON.parse(res.data)
								// console.log('上传成功 data ', info)
								let imgUrl = info.data[0].url;
								uni.hideLoading()
								if(that.sideStatusImage.length<20){
									app.globalData.side.sideStatusImage.push(imgUrl)
									
								}else{
									uni.hideLoading()
									uni.showToast({
										title: '最多上传20张图片',
										icon: 'none',
										mask: true
									})
								}
				            },
							fail(err){
								
								uni.hideLoading()
								uni.showToast({
									title: '上传失败',
									icon: 'none',
									mask: true
								})
							},
							complete(){
								
							}
				        });
				    }
				})
			},
			
			/**
			 * 1
			 * 通过七牛云的方式来上传图片
			 */
			async uploadSideImage() {
				if(!this.qiUploadToken) {
					let token = await this.qiToken()
					if(!token){
						uni.showToast({
							title: '获取上传七牛云的令牌失败，请等会上传',
							mask: true,
							icon: 'none'
						})
						return
					}
				}
				let that = this;
				// 选择图片
				uni.chooseImage({
					count: 8,
					success: function (res1) {
						// console.log('选择图片', res1)
						
						let paths = res1.tempFilePaths;
						let files = res1.tempFiles
						for(let i =0; i<files.length; i++) {
							uni.showLoading({
								title: '正在上传文件',
								mask: true
							})
							let filePath = paths[i];
							let file = files[i];
							let suffix = '';
						
							// #ifdef APP-PLUS
							suffix = file.path.substr(file.path.lastIndexOf('.') + 1)
							// #endif
							// #ifdef H5
							suffix = file.name.substr(file.name.lastIndexOf('.') + 1)
							// #endif
							
							
							let temp = that.getUpdateTime()+'_';
							let key = 'jsupload_'+temp + md5(that.qiUploadToken + temp + file.size) + '.' + suffix
							
							// console.log('file', file, 'suffix', suffix, 'temp', temp, 'key', key)
							
							// 交给七牛上传
							qiniuUploader.upload(filePath, (res3) => {
									// console.log('res3 七牛上传成功', JSON.parse(JSON.stringify(res3)))
									let imgName = res3.imageURL;
									let app = getApp()
									let fileUrl = app.globalData.qiUrl + imgName;
									
									if(app.globalData.side.sideStatusImage.length<20) {
										app.globalData.side.sideStatusImage.push(fileUrl)
										
										that.sideStatusImage.push(filePath)
										
										// console.log('图片上传成功后 app.globalData.side.sideStatusImage', JSON.parse(JSON.stringify(app.globalData.side.sideStatusImage)))
										// console.log('图片上传成功后 that.sideStatusImage', JSON.parse(JSON.stringify(that.sideStatusImage)))
									}
									uni.hideLoading()
								}, error=>{
									// console.log('上传失败 error', error)
									let msg = '上传失败';
									if(error.errMsg){
										msg = error.errMsg
									}
									uni.showToast({
										title: msg,
										icon: 'none',
										mask: true
									})
									if(msg.indexOf('timeout') != -1) {
										setTimeout(()=>{
											uni.showModal({
												title: '网络请求超时',
												content: '当前网络不好，请到网络好的巡检或离线巡检',
												showCancel: false
											})
										}, 1000)
									}
								}, {
										region: 'ECN', //qiniu.region.z2  up-z2.qiniup.com  //ECN, SCN, NCN, NA, ASG
										// domain: '', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
										key: key, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
										// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
										uptoken: that.qiUploadToken, // 由其他程序生成七牛 uptoken
								}
							)
						}
					}
				})
			},
			
			/**
			 * 获取
			 * 七牛云上传需要的 token
			 */
			qiToken() {
				let url = '?method=getUploadToken';
				let data = {
					method: 'getUploadToken'
				}
				let that = this;
				
				let p = new Promise(async (resolve, reject)=>{
					
					await this.$requestP(url, data, res=> {
						// console.log("七牛云上传需要的 token", JSON.parse(JSON.stringify(res)))
						let token = res.data.data.uploadToken;
						that.qiUploadToken= token;
						// console.log('token', token)
						
						resolve(token)
					}, err=>{
						reject(false)
					}, () =>{
						
					}, () =>{
						reject(false)
					})
				
				})
				return p;
			},
			
			/**
			 * 边坡现状图片
			 * 删除图片
			 */
			deleteSideImage(index) {
				let app = getApp()
				this.sideStatusImage.splice(index, 1)
				app.globalData.side.sideStatusImage.splice(index, 1)
			},
			
			
			/**
			 * 点击上传的图片，显示图片大图
			 */
			tapImage(name, index){
				this.current = index;
				let lists = []
				let app = getApp()
				let side = app.globalData.side;
				
				switch(name) {
					case 'slopeNowImage': {
						
						// 1 边坡现状图片
						for(let i=0; i<side.sideStatusImage.length; i++){
							lists.push(side.sideStatusImage[i])
							// if(i != index){
							// 	lists.push(side.sideStatusImage[i])
							// }else{
							// 	lists.unshift(side.sideStatusImage[i])
							// }
							
						}
						
						this.lookImageLists = lists;
						this.lookImageFlag = true;
						break;
					}
					case 'sideShape': {
						
						// 2 边坡变形
						for(let i=0; i<side.sideShape.images.length; i++){
							lists.push(side.sideShape.images[i])
							// if(i != index) {
							// 	lists.push(side.sideShape.images[i])
							// }else{
							// 	lists.unshift(side.sideShape.images[i])
							// }
							
						}
						this.lookImageLists = lists;
						this.lookImageFlag = true;
						break;
					}
					case 'sideDrainage': {
						// 3 防护排水调查 
						for(let i=0; i<side.sideDrainage.images.length; i++){
							lists.push(side.sideDrainage.images[i])
							// if(i != index){
							// 	lists.push(side.sideDrainage.images[i])
							// }else{
							// 	lists.unshift(side.sideDrainage.images[i])
							// }
							
						}
						this.lookImageLists = lists;
						this.lookImageFlag = true;
						break;
					}
					case 'sideProject': {
						//  4 防护工程调查
						for(let i=0; i<side.sideProject.images.length; i++){
							lists.push(side.sideProject.images[i])
							// if(i != index) {
							// 	lists.push(side.sideProject.images[i])
							// }else{
							// 	lists.unshift(side.sideProject.images[i])
							// }
							
						}
						this.lookImageLists = lists;
						this.lookImageFlag = true;
						break;
					}
					case 'drawn1': {
						// 2 边坡变形
						
						for(let i=0; i<side.sideShape.drawn.length; i++){
							lists.push(side.sideShape.drawn[i])
							// if(i != index) {
							// 	lists.push(side.sideShape.drawn[i])
							// }else{
							// 	lists.unshift(side.sideShape.drawn[i])
							// }
							
						}
						this.lookImageLists = lists;
						this.lookImageFlag = true;
						break;
					}
					case 'drawn2': {
						for(let i=0; i<side.sideDrainage.drawn.length; i++){
							lists.push(side.sideDrainage.drawn[i])
							// if(i != index) {
							// 	lists.push(side.sideDrainage.drawn[i])
							// }else{
							// 	lists.unshift(side.sideDrainage.drawn[i])
							// }
							
						}
						this.lookImageLists = lists;
						this.lookImageFlag = true;
						break;
					}
					case 'drawn3': {
						for(let i=0; i<side.sideProject.drawn.length; i++){
							if(i != index) {
								lists.push(side.sideProject.drawn[i])
							}else{
								lists.unshift(side.sideProject.drawn[i])
							}
							
						}
						this.lookImageLists = lists;
						this.lookImageFlag = true;
						break;
					}
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.remarks_show {
		border-radius: 6rpx;
		padding: 20rpx 15rpx;
		box-sizing: content-box;
		background-color: #F8F8FA;
		margin-bottom: 15rpx;
		.remarks_item {
			padding: 25px;
			min-height: 200px;
			border-radius: 6rpx;
			background-color: #FFFFFF;
			// margin-bottom: 30px;
		}
		.remarks_text{
			padding: 10rpx 0;
		}
	}
		
	.remarks_show_none {
		height: 0;
	}
		
	.remarks_ul {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20px;
		
		.remarks_li {
			// float: left;
			margin-bottom: 20px;
			margin-right: 20px;
		
			image {
				width: 100%;
				height: 100%;
			}
			video{
				width: 100%;
				height: 100%;
			}
			
		}
		.remarks_lis{
			width: 24%;
			height: 0;
			padding-bottom: 24%;
			margin-bottom: 20px;
			margin-right: 1%;
			position: relative;
			.remarks_img{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				image{
					width: 100%;
					height: 100%;
				}
				video{
					width: 100%;
					height: 100%;
				}
			}
			.video_box{
				background-color: rgba(0,0,0,.8);
				display: flex;
				justify-content: center;
				align-items: center;
				.video_img{
					width: 60rpx;
					height: 60rpx;
					background-color: #fff;
					border-radius: 50%;
					image{
						float: left;
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
		
		& .remarks_li:nth-child(4n) {
			margin-right: 0;
		}
		.idea_message{
			height: 200rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 10px;
			border: 1px solid #dcdcdc;
			border-radius: 6rpx;
			textarea{
				width: 100%;
				height: 100%;
				font-size: 20rpx;
				color: #4A5260;
			}
		}
	}
	.close_img{
		position: absolute;
		top: -15rpx;
		right: 0rpx;
		// z-index: 12;
		width: 30rpx;
		height: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #eee;
		border-radius: 50%;
		image{
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>
